| 简单说 通过JS控制CSS的各种方式（上） | 您所在的位置：网站首页 › leetcode1425 js › 简单说 通过JS控制CSS的各种方式（上） |
|
版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/77888446 说明通过JS控制CSS，我们能做出更多漂亮的页面特效，做出更炫的交互效果。今天我们来说说JS控制CSS的各种方式。 解释JavaScript、CSS、HTML是前端三剑客，我们说正事之前，先来说说CSS与HTML的事。 在HTML中使用CSS有三种方式 1、内联方式 CSS定义在单个的HTML元素中的style属性中 2、内部样式表 CSS通过标签定义在HTML页面的标签中 3、外部样式表 将CSS定义在一个外部的CSS文件中，在HTML页面通过标签引用CSS文件 而JavaScript 中的DOM操作，又可以控制HTML页面中的元素。 说到这，我们最少已经知道，三种方式，通过JS控制CSS了。 好了，我们开始说正事了。 1、通过“ . ”直接设置元素的style属性语法： element.style.attributename= attributevalue; 例如： document.body.style.width = '100px';注意：这里的style属性的值是一个对象。 这个对象所包含的属性与CSS规则一 一对应，但是名字需要用驼峰命名的方式进行改变，比如background-color写成backgroundColor。改写的规则是将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符串css，比如float写成cssFloat。 document.body.style.backgroundColor= 'red';温馨提示： 如果你不愿意换成驼峰命名法的话，也有办法，用“[ ]”代替 “.” , “[ ]” 中直接写字符串类型的CSS属性。 例如： document.body.style['background-color']= 'red';如果你好奇为什么可以这样做，请看这里 简单说 background-color 与 backgroundColor的区别 2、通过 setAttribute 方法 设置元素的style属性setAttribute 方法添加指定的属性，并为其赋指定的值。 如果这个指定的属性已存在，则仅设置/更改值。 语法： element.setAttribute(attributename,attributevalue)例如： var a = document.body; a.setAttribute("style","background-color:red;height:100px;");这个方法很好用，第一个参数写“style”，第二个参数就是CSS，把需要的CSS直接粘贴进去就可以了。 注意： 两个参数都是字符串类型的哦！ 3、通过style对象的 setProperty 方法 设置CSS属性setProperty 方法直接设置某个CSS属性 语法： element.style.setProperty (propertyName, propertyValue, priority);setProperty 方法的第三个参数（priority），字符串类型，指定样式属性的优先级。样式属性的优先级可以通过getPropertyPriority方法获取。 如果要设置!important，建议设置第三个参数 ，但是传参的时候不用写前面的 “!” 。 例如： var a = document.body; a.style.setProperty ("background-color", "green", 'important');注意： setProperty 方法 与 setAttribute 方法 是不一样的，setProperty 方法是元素style属性的一个方法，setAttribute 方法是元素的一个方法，虽然他们都能控制CSS，但还是有区别的。 更多关于setProperty 方法的知识请看 http://help.dottoro.com/ljdpsdnb.php 4、通过style对象的cssText属性，控制CSSstyle对象 的 cssText属性设置或返回样式声明的内容作为字符串。 语法： element.style.cssText = string例如： document.body.style.cssText = "background-color:red";注意： 直接用 “=” 会覆盖原来的值，需要追加新的值就用 “+=” 5、通过元素的 class 属性 控制CSS我们可以通过先定义好class，然后改变元素的class属性，来控制CSS 元素的 className 属性设置或返回元素的 class 属性值。 语法： element.className = 'className';例如： .redBorder{ border:1px solid red; } .greenBg{ background-color:green; } var a = document.body; a.className = 'greenBg'; //元素的redBorder class会被替换 为 greenBg //如果两个class 都需要,可以把+ 变成 += ,值的最前面加上一个空格，像下面这样 //a.className += ' greenBg';温馨提示： 是className 不是class，class在JavaScript中是保留字所以不能用，要用 className 哦！ 6、通过创建 标签，引入新的样式我们可以先在元素上定义好class属性，然后通过JS创建，给元素加上样式 例如： var head = document.head; // 创建 style 元素 var styleElement = document.createElement('style'); //在创建好的style元素中，写上CSS styleElement.innerHTML = '.redBg{background-color:red;}'; //在head 中加上 style 元素 head.append(styleElement); 7、通过创建 标签，引入新的样式我们可以先在外部创建一个CSS文件，然后通过JS创建 标签，在页面里引入新的样式，这个方法和 上面的创建 标签 的方法很类似。 外部CSS文件（style.css）： .redBg{ background-color:red; }HTML页面： // 创建 link 元素 var linkElement = document.createElement('link'); //设置 linkElement 的src 为外部CSS文件的路径 linkElement.href = './style.css'; //在head 中加上 linkElement 元素 document.head.append(linkElement); 8、通过 insertRule 或者 addRule 插入新的样式StyleSheet对象代表网页的一张样式表，它包括节点加载的样式表和节点内嵌的样式表。 document对象的styleSheets属性，可以返回当前页面的所有StyleSheet对象（即所有样式表）。它是一个类似数组的对象。 insertRule方法用于在当前样式表的cssRules对象插入CSS规则 语法： stylesheet.insertRule(rule, index)insertRule 方法的第一个参数是表示CSS规则的字符串，第二个参数是该规则在cssRules对象的插入位置。 例如： var styleTag = document.createElement ("style"); var head = document.getElementsByTagName ("head")[0]; head.appendChild (styleTag); styleTag.sheet.insertRule ("body {background:red;}", 0);更多关于insertRule 方法的知识请看 https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule addRule方法 语法： object.addRule (selector, styleDef [, positionIndex]);参数说明： selector ： 必须，指定新规则对象的选择器的字符串。 styleDef ： 必须，指定新规则对象的样式定义的字符串。 positionIndex ：可选，整数，指定规则集合中新规则的位置。 var styleTag = document.createElement ("style"); var head = document.getElementsByTagName ("head")[0]; head.appendChild (styleTag); styleTag.sheet.addRule ("body", "background:red", 0);更多关于addRule 方法的知识请看 http://help.dottoro.com/ljuucnct.php 温馨提示： 方式8，插入的新的样式，在页面中看不见，如果需要看见的话，可以通过样式表的cssRules属性。 例如： styleTag.sheet.cssRules总结说了这么多方法，要注意各种方式控制CSS后，样式的优先级问题 方法 优先级 通过“ . ”直接设置元素的style属性 内联样式 通过 setAttribute 方法 设置元素的style属性 内联样式 通过style对象的 setProperty 方法 设置CSS属性 内联样式 通过style对象的 cssText属性，控制CSS 内联样式 通过元素的 class 属性 控制CSS 内部样式 通过创建 标签，引入新的样式 内部样式 通过创建 标签，引入新的样式 外部样式 通过 insertRule 或者 addRule 插入新的样式 内部样式 或 外部样式 这次我们就先说到这，下次我们说说如何把他们封装起来，方便我们以后使用。 本文参考 http://www.cnblogs.com/LiuWeiLong/p/6058059.html http://javascript.ruanyifeng.com/dom/css.html#toc10 http://www.cnblogs.com/susufufu/p/5749922.html |
| CopyRight 2018-2019 实验室设备网 版权所有 |